<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2016/8/22
  Time: 11:30
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <title>新途New way</title>
    <%@include file="../../../include/header.jsp" %>
    <style>
        a:hover, a:visited, a:active, a:link {
            text-decoration: none;
            color: black;
        }

        #coupon, #shop {
            margin-left: 10%;
        }

        #select label {
            font-family: -apple-system, SF UI Text, Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            line-height: 1.4;
            font-weight: 100;
        }
    </style>
</head>
<body>
<!-- Status bar overlay for full screen mode (PhoneGap) -->
<div class="statusbar-overlay"></div>
<!-- Panels overlay-->
<div class="panel-overlay"></div>
<!-- Views -->
<div class="views">
    <!-- Your main view, should have "view-main" class -->
    <div class="view view-main">
        <!-- Top Navbar-->
        <div class="navbar">
            <div class="navbar-inner">
                <!-- We need cool sliding animation on title element, so we have additional "sliding" class -->
                <div class="left">
                    <a class="link" onClick="targetPage()" id="back"><i class="icon icon-back"></i><span>返回</span></a>
                </div>
                <div class="center sliding">门票券票</div>
            </div>
        </div>
        <!-- Pages container, because we use fixed-through navbar and toolbar, it has additional appropriate classes-->
        <div class="pages navbar-through toolbar-through">
            <!-- Page, "data-page" contains page name -->
            <div class="page" data-page="index">
                <!-- Scrollable page content -->
                <div class="page-content" style="margin-top:10%;padding-left: 8%;">
                    位置:
                    <div class="dropdown">
                        <select class="btn btn-default dropdown-toggle" type="button" id="cityId"
                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" style="width: 80%">
                            <option value="1">皇后镇</option>
                            <option value="2">奥克兰</option>
                            <option value="3">罗托鲁瓦</option>
                            <option value="4">陶波</option>
                            <option value="5">惠灵顿</option>
                            <option value="6">但尼丁</option>
                            <option value="7">基督城</option>
                            <option value="8">尼尔森</option>
                            <option value="9">陶兰加</option>
                            <option value="10">瓦纳卡</option>
                        </select>
                    </div>
                    <div style="margin-top: 5%;" id="select">
                        <input type="radio" value="1" checked="checked" name="type" id="ticket"/>
                        <label for="ticket">门票</label>
                        <input type="radio" value="2" name="type" id="coupon"/>
                        <label for="coupon">餐饮优惠券</label>
                        <input type="radio" value="3" name="type" id="shop"/>
                        <label for="shop">购物券</label>
                    </div>
                </div>
            </div>
        </div>
        <!-- Bottom Toolbar-->
        <div class="toolbar">
            <div class="toolbar-inner" id="index-tool">

                <a class="button" id="toolbar-button" onclick="handler()"
                   style="width:50%;margin-left: 25%;border-color: #808080;color:black">搜索</a>
            </div>
        </div>
    </div>
</div>

<%@include file="../../../include/footer.jsp" %>

<%
    String timestamp = Long.toString(System.currentTimeMillis() / 1000);
%>

<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js" ></script>
<script type="text/javascript" src="my-app.js"></script>
<%--<script>
//关于微信的config配置
    var para = {
        url:location.href.split('#')[0],
        timestamp:'<%=timestamp%>',
        noncestr:'zenghf'
    }
    var url = "${ctx}/mulanweb/signature/getSignature" ;
    $.ajax({
        url:url,
        async:false ,
        type:"post" ,
        dataType: "json",
        data:para ,
        success:function(data){
            var info = data.DataList ;
            wx.config({
                debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: 'wx1a5d74a8c7cb135e', // 必填，公众号的唯一标识
                timestamp:'<%=timestamp%>' , // 必填，生成签名的时间戳
                nonceStr: 'zenghf', // 必填，生成签名的随机串
                signature:info.signature ,// 必填，签名，见附录1
                jsApiList: [
                    'onMenuShareTimeline',
                    'onMenuShareAppMessage',
                    'onMenuShareQQ',
                       'onMenuShareWeibo',
                    'onMenuShareQZone',
                    'chooseWXPay',
                    'startRecord'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
            });
        }
    });

    wx.error(function(res){
        // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
        alert("配置失败");
        console.info(res);
    });
    wx.ready(function(){
        // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
        console.info(wx);
    });
</script>--%>
<script>
    var myApp = new Framework7();

    var $$ = Framework7.$;

    var mainView = myApp.addView('.view-main');

    //关于为微信支付的测试方法
function tttt(){

    var para = {
        timestamp:'<%=timestamp%>',
        noncestr:'zenghf',
        package: 'prepay_id=wx20160901151253c48fe0e43e0557404338',
        signType: 'SHA1'
    }
    var url = "${ctx}/mulanweb/signature/getPaySignature" ;
    $.ajax({
        url:url,
        async:false ,
        type:"post" ,
        dataType: "json",
        data:para ,
        success:function(data) {
            var info = data.DataList;
            wx.chooseWXPay({
                timestamp: info.nonceStr,
                nonceStr: info.nonceStr,
                package: info.nonceStr,
                signType: 'SHA1', // 注意：新版支付接口使用 MD5 加密
                paySign: info.nonceStr,
                success: function (res) {
                    // 支付成功后的回调函数
                    console.info(res);
                    alert("支付模块调用成功");
                },
                fail:function(info){
                    console.info(info);
                    alert("支付模块调用失败");
                }
            });
        }
    });
}
    function handler(){
        var pageName = myApp.mainView.activePage.name;
        console.info(pageName);
        if(pageName == 'index'){
            var cityId=  $("#cityId").val();
            var typeId = $("#select input:radio[name=type]:checked").val();
            $("#toolbar-button").attr("href", "../search-data.jsp?cityId="+cityId+"&typeId="+typeId);
            mainView.hideToolbar();
        }else if(pageName == 'detail'){
        }
    }

    function targetPage() {
        var pageName = myApp.mainView.activePage.name;
        if (pageName == 'index') {
            WeixinJSBridge.call('closeWindow');
        } else if (pageName == 'search') {
            $("#back").attr("href", "list.jsp");
            $("#toolbar-button").html("搜索");
            mainView.showToolbar();
        } else if (pageName == 'detail') {
            $("#back").attr("href", "../search-data.jsp");
            mainView.hideToolbar();
        }
    }
</script>
</body>
</html>
